<!--
 * @Author: DESKTOP-D0D7KKT\Administrator 18368095041@163.com
 * @Date: 2024-12-31 16:32:30
 * @LastEditors: DESKTOP-D0D7KKT\Administrator 18368095041@163.com
 * @LastEditTime: 2025-01-02 10:22:04
 * @FilePath: \road-admin-web\src\components\ui\GanttTable\components\BarView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
const props = withDefaults(
    defineProps<{
        progress?: number;
        type: 'green' | 'orange' | 'red';
    }>(),
    {
        progress: 0,
        type: 'green'
    }
);

const { progress, type } = toRefs(props);
</script>

<template>
    <div class="barview-container">
        <div
            :class="`progress ${type}`"
            :style="{ width: progress * 100 + '%' }"
        ></div>
    </div>
</template>

<style lang="scss" scoped>
.barview-container {
    position: relative;
    width: 100%;
    height: 20px;
    overflow: hidden;
    background: #ebeef5;
    border-radius: 4px;

    .progress {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }

    .green {
        background: var(--el-color-success);
    }

    .orange {
        background: var(--el-color-warning);
    }

    .red {
        background: var(--el-color-danger);
    }
}
</style>
